<script setup>
import { onMounted, reactive, ref } from 'vue';
import { delnoticeApi } from '@/api/content/notice.js'
import { getnoticeApi } from '@/api/content/notice.js'
import { useHouseAllList } from '../../../hooks/house/index.js'
import { useTypeState, useNoticeState } from '../../../hooks/content/notice.js'
import { NoticeTable } from '../../../hooks/content/notice.js'
import { ElMessage } from 'element-plus'
import addForm from './addForm.vue'
import ImagePreview from '@/components/ImagePreview'
import Table from '../../../components/Table/table'
import Pagination from '../../../components/Pagination/Pagination'
// todo=============================================
const houseList = useHouseAllList(true)
const stateList = useNoticeState()
const typeList = useTypeState()
const baseURL = 'http://124.223.14.236:8881'
const addRef = ref()
const UsageType = (val) => typeList.find(item => item.value === val)?.label
const UsageStatus = (val) => stateList.find(item => item.value === val)?.label
// const usagePk = list.parking_space.name.join('')
// ==================================================
// 列表功能
const queryData = reactive({
  pageSize: 3,
  current: 1,
  community_code: '',
  title: '',
  status: '',
  type: '',

})
// 房屋列表
const list = ref([])
// 数据总数
const total = ref()
const initData = async () => {
  let res = await getnoticeApi(queryData)
  // console.log(data);
  list.value = res.data.rows
  // console.log(res);
  total.value = res.data.count
}
// todo=============================================
onMounted(() => {
  initData()
})
// 搜索确定
const onSearch = () => {
  // queryData.create_time = queryData.create_time !== '' ? queryData.create_time.map(item => +item).join(',') : queryData.create_time
  queryData.current = 1
  initData()
  // console.log(111);
}
// 搜索取消
const onReset = () => {
  Object.assign(queryData, {
    pageSize: 3,
    current: 1,
    community_code: '',
    title: '',
    status: '',
    type: '',
  })
  initData()
}
// ----------修改功能--------------------------------
const editRow = (id) => {
  addRef.value.replyData(id);
};
// --------------------删除功能--------------------------------
const delRow = async (id) => {
  let { success, msg } = await delnoticeApi(id)
  if (!success) {
    return ElMessage.error(msg)
  }
  ElMessage.success('删除成功')
  if (queryData.pageNum > 1 && list.value.length === 1) queryData.pageNum--
  initData()
}
</script>
<template>
  <div class="app-container">
    <div class="top">
      <span class="h1">车位管理</span><span>用于管理小区里每一个停车位的基本信息</span>
      <!-- <el-card>
        <el-form :model="form" ref="form" :rules="rules" :inline="true" size="normal" class="top" style=" display: flex;">
          <el-form-item>
            <label style="width: 100%;">小区名称</label>
            <el-select v-model="queryData.community_code" placeholder="请输入">
              <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <label>车位名称 </label>
            <el-input v-model="queryData.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <label style="width: 100%;">创建时间 </label>
            <el-date-picker v-model="queryData.create_time" type="datetimerange" :shortcuts="shortcuts"
              range-separator="至" start-placeholder="请选择" end-placeholder="请选择" />
          </el-form-item>
          <div style="display: flex" class="x">
            <el-form-item>
              <el-button type="primary" @click="onSearch">搜索</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-card> -->
      <!-- ======================================== -->
      <el-card style="margin-bottom: 15px;">
        <!-- 搜索区域 -->
        <el-form label-width="20px" style="display: flex;">
          <el-row>
            <el-col :span="5">
              <el-form-item>
                <span class="demonstration">小区名称</span>
                <el-select v-model="queryData.community_code" placeholder="请输入">
                  <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <span class="demonstration">标题 </span>
                <el-input v-model="queryData.title" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <span class="demonstration">类型 </span>
                <el-select v-model="queryData.type" placeholder="请输入">
                  <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <span class="demonstration">状态</span>
                <el-select v-model="queryData.status" placeholder="请输入">
                  <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="x">
                <el-form-item>
                  <el-button type="primary" @click="onSearch">搜索</el-button>
                  <el-button @click="onReset">重置</el-button>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-card>
      <!-- 抽屉 -->
      <addForm ref="addRef" @update-list="initData" :list="list" />
      <!-- 表格 -->
      <Table :table="NoticeTable" :tableData="list" @edit="editRow" @del="delRow">
        <template #pic_url="{ row }">
          <ImagePreview :src="baseURL + row?.pic_url" alt="" />
        </template>
        <template #type="{ row }">
          {{ UsageType(row?.type) }}
        </template>
        <template #status="{ row }">
          {{ UsageStatus(row?.status) }}
        </template>
        <template #community.name="{ row }">
          {{ row.community?.name }}
        </template>
      </Table>
      <!-- 分页器 -->
      <Pagination v-model:pageNum="queryData.current" v-model:pageSize="queryData.pageSize" :total="total"
        @initData="initData"></Pagination>
    </el-card>
  </div>
</template>
<style scoped>
.h1 {
  font-size: 18px;
  margin-right: 10px;
  font-weight: 700;
}

.top {
  margin-bottom: 20px;
  position: relative;
}

.x {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  top: 32px;
}

img {
  max-width: 100px;
  max-height: 100px;
}
</style>